﻿<!--
 * Created by liushuai on 2016/1/20.
 *-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="ui.css" />
    <script type="text/javascript" src="wh.ui.js"></script>
    <script type="text/javascript" src="../libs/jquery-2.1.3.min.js"></script>
    <script>
        function init() {
            wh.ui.UiParser.parse(document.body);
        }
    </script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            background-color: aquamarine
        }

        div[ui-layout-type="HeaderFooterlayout"] {
            width: 100%;
            height: 100%
        }

        div[class="ui-layout-topRegion"] {
            background-color: red
        }

        div[class="ui-layout-midRegion"] {
            background-color: yellow
        }

        div[class="ui-layout-bottomRegion"] {
            background-color: blue
        }

        div[class="ui-layout-leftRegion"] {
            background-color: pink
        }

        div[class="ui-layout-rightRegion"] {
            background-color: #A6B590;
        }
    </style>
</head>
<body onload="init()">
<!--<div hui-layout-type='HeaderFooterLayout' hui-layout-attr='{"heights" : ["30%", "40%", "30%"]}'>-->
<div ui-layout-type='HeaderFooterLayout'>
    <div></div>
    <div ui-layout-type='FillLayout'>
        <div ui-layout-type='SashLayout'>
            <div></div>
            <div ui-layout-type='RowLayout'>
                <div>
                    <div class="col l3 m5 s12" style="border: 1px solid black">输入场4</div>
                    <div class="col l3 m5 s12 push-l1 push-m1" style="border: 1px solid black">输入场5</div>
                    <div class="col l3 m5 s12 push-l2" style="border: 1px solid black">输入场6</div>
                </div>
            </div>
        </div>
    </div>
    <div></div>
</div>
</body>
</html>